<template>
	<swiper class="swiper" indicator-dots circular>
		<template v-for="item in bannerList" :key="item._id">
			<swiper-item class="swiper-item">
				<navigator :url="item.target==='miniProgram'?item.url:`/pages/classify/classlist/classlist?${item.url}`" 
				:target="item.target==='miniProgram'?'miniProgram':'self'"
				:app-id="item.appid"
				class="banner-container">
					<image class="banner" :src="item.picurl" lazy-load mode="aspectFill"></image>	
				</navigator>
			</swiper-item>
		</template>
	</swiper>
</template>

<script setup>
import { apiGetBanner } from '@/service/apis';
const bannerList = ref([])

const getBanner = async() => {
	const res = await apiGetBanner()
	bannerList.value = res
}

onMounted(() => {
	getBanner()
})
</script>

<style lang="scss" scoped>
.swiper {
  width: 750rpx;
  height: 340rpx;
  .swiper-item {
    width: 100%;
    height: 100%;
	padding: 0 30rpx;
    .banner-container {
      width: 100%;
      height: 100%;
      .banner {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}
</style>
